import {Component, forwardRef, OnInit} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

declare var $: any;

@Component({
  selector: 'app-froala-editor',
  templateUrl: './froala-editor.component.html',
  styleUrls: ['./froala-editor.component.less'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => FroalaEditorComponent),
    multi: true
  }]
})
export class FroalaEditorComponent implements ControlValueAccessor, OnInit {
  // 超大屏幕的功能按钮
  toolbarButtons = ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', 'insertHR', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'];
  // 大屏幕的功能按钮
  toolbarButtonsMD = ['fullscreen', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'color', 'paragraphStyle', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', 'insertHR', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', 'undo', 'redo', 'clearFormatting'];
  // 小屏幕的功能按钮
  toolbarButtonsSM = ['fullscreen', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'insertLink', 'insertImage', 'insertTable', 'undo', 'redo'];
  // 手机的功能按钮
  toolbarButtonsXS = ['bold', 'italic', 'fontFamily', 'fontSize', 'undo', 'redo'];
  froalaModelData: any;

  // tslint:disable-next-line:ban-types
  config: Object = {
    placeholderText: '请输入内容!',
    charCounterCount: true,
    heightMin: 200,
    heightMax: 600,
    language: 'zh_cn',

    saveInterval: 0, // 不自动保存，默认10000，0为不自动保存
    theme: 'dark', // 主题：dark，red，gray，royal，注意需要引入对应主题的css
    toolbarBottom: false, // 默认
    toolbarButtonsMD: this.toolbarButtonsMD,
    toolbarButtonsSM: this.toolbarButtonsSM,
    toolbarButtonsXS: this.toolbarButtonsXS,
    toolbarInline: false, // true选中设置样式,默认false
    imageUploadMethod: 'POST',
    charCounterMax: -1,  // 最大字数限制，-1为不限制
    saveURL: 'article/saveArticle',  // 自动保存的地址（body参数为html内容）
    saveParams: {postId: '1'},  // 保存内容时传的参数
    spellcheck: true,  // 是否允许浏览器对输入内容进行拼写检查
    allowedImageTypes: ['jpeg', 'jpg', 'png', 'gif'],
    imageUploadURL: 'attachment/uploadArticleImg', // 上传到本地服务器
    imageUploadParams: {pid: '1'}, // 上传图片时带的参数
    imageDefaultWidth: 100, // 上传图片后的默认大小
    imageResizeWithPercent: true, // 不设置这个，imageDefaultWidth的单位为像素，设置后为%
    videoUploadURL: 'attachment/uploadArticleVideo',
    mode: 'text/html',
    // enter: $.FroalaEditor.ENTER_BR, // 设置回车键功能
    // tslint:disable-next-line:max-line-length
    toolbarButtons: this.toolbarButtons
  };

  // End ControlValueAccesor methods.
  constructor() {
  }

  // Begin ControlValueAccesor methods.
  onChange = (val) => {
  };

  onTouched = () => {
  };

  // Form froalaModelData content changed.
  writeValue(content: any): void {
    this.froalaModelData = content;
  }

  registerOnChange(fn: (_: any) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  ngOnInit(): void {
  }
}
